import React from "react";
import _get from 'lodash/get';
import BaseEdit from "./base";
import Page from "./page";
import { anchor, tastArr } from "./flowConfig";

import styles from "./edit.less";
// import G6Editor from "@antv/g6-editor";
const G6Editor = require('../../g6-editor/src')

const { Flow } = G6Editor;
/* 注册任务节点 */
Flow.registerNode("task-active", {
  draw(item) {
    const group = item.getGraphicGroup();
    const model = item.getModel();
    const width = 118;
    const height = 60;
    const x = -width / 2;
    const y = -height / 2;
    const borderRadius = 4;
    const keyShape = group.addShape("rect", {
      attrs: {
        x,
        y,
        width,
        height,
        radius: borderRadius,
        lineWidth: 2,
        // fill: "#fff",
        stroke: "#ee622b",
        fill: _get(window, 'FLOW_THEME.highlightColor', '#fff'),
        // stroke: _get(window, 'FLOW_THEME.color', "#ee622b"),
      },
    });
    group.addShape("rect", {
      attrs: {
        x: -(width - 2) / 2,
        y: -(height - 2) / 2,
        width: width - 2,
        height: height - 2,
        radius: borderRadius,
        // fill: "#fff",
        stroke: "#ee622b",
        fill: _get(window, 'FLOW_THEME.highlightColor', '#fff'),
        // stroke: _get(window, 'FLOW_THEME.color', "#ee622b"),
      },
    });

    // 类型 logo
    group.addShape("image", {
      attrs: {
        img: this.type_icon_url,
        x: -20 / 2,
        y: y + 8,
        width: 20,
        height: 20,
        // fill: "#fff",
        stroke: "#ff0000",
        fill: _get(window, 'FLOW_THEME.highlightColor', '#fff'),
        // stroke: _get(window, 'FLOW_THEME.color', "#ff0000"),
      },
    });
    // 名称文本
    const label = model.label ? model.label : this.label;
    group.addShape("text", {
      attrs: {
        text: label,
        x: 0,
        y: 6,
        textAlign: "center",
        textBaseline: "top",
        // fill: "rgba(0, 0, 0, .55)",
        stroke: _get(window, 'FLOW_THEME.color', "rgba(0, 0, 0, .55)"),
      },
    });
    return keyShape;
  },
  // 设置锚点
  // anchor
});

tastArr.forEach((item) => {
  // 读数据表
  Flow.registerNode(
    item.activeShape,
    {
      label: item.label,
      type_icon_url: item.type_icon_url,
      // 设置锚点
      anchor: item.anchor || anchor,
    },
    "task-active",
  );
});

class Index extends BaseEdit {
  constructor(props) {
    super(props);
    this.tableIndex = 0;
    this.editMinHeight = 340;
    this.state = {
      visible: false,
      itemDisabled: true,
    };
  }

  componentDidMount() {
    super.componentDidMount();
    const { getEditThis } = this.props;
    const { editor } = this;
    const flowpage = editor.getCurrentPage();
    const graph = flowpage.getGraph();
    graph.changeMode("viewchart");
    if (getEditThis) getEditThis(this); // 把this暴露给父组件
  }

  componentDidUpdate(preProps) {
    const { height } = this.props;
    const preHeight =
      preProps.height > this.editMinHeight
        ? preProps.height
        : this.editMinHeight;
    const nowHeight = height > this.editMinHeight ? height : this.editMinHeight;
    if (preHeight !== nowHeight) {
      this.editorForceFit();
    }
  }

  /* 父组件可能要调用的方法-start */

  // 画布适应
  editorForceFit = (fitView) => {
    const { editor } = this;
    const page = editor.getCurrentPage();
    const graph = page.getGraph();
    graph.forceFit(true);
    if (fitView) {
      graph.setFitView(fitView);
    }
  };

  // 绘制图 默认物理模型样式
  drawModel = (data) => {
    const { editor } = this;
    const page = editor.getCurrentPage();
    const { nodes = [], edges = [], groups =[] } = data || {};
    page.read({ nodes, edges, groups }); // 反显数据
  };

  /* 父组件可能要调用的方法-end */

  render() {
    const { height, className = "", flowRecords } = this.props;
    const newHeight = height > this.editMinHeight ? height : this.editMinHeight;
    return (
      <div className={`editor ${className}`} style={{ height: newHeight }}>
        <div className={`bottom-container ${styles.flowchart_con}`}>
          <Page
            editor={this.editor}
            style={{ height }}
            className={styles.flowchart_page}
            flowRecords={flowRecords}
          />
        </div>
      </div>
    );
  }
}

export default Index;
